<template>
    <div class="demo">
        <h1>当前和为: {{ sum }}</h1>
        <h1>当前和为: {{ bigSum }}</h1>
        <h1>我在 {{ school }} 学习 {{ subject }}</h1>
        <select v-model.number="count">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <button @click="add">+</button>
        <button @click="sub">-</button>
        <button @click="addWhenOdd">WhenOdd</button>
        <button @click="addWaitAMonent">WaitAMonent</button>
    </div>
</template>

<script>
    import {mapGetters, mapState} from 'vuex'
    export default {
        name: 'CountComponent',
        data() {
            return {
                count: 1
            };
        },
        methods: {
            add() {
                this.$store.dispatch('add', this.count);
            },
            sub() {
                this.$store.dispatch('sub', this.count);
            },
            addWhenOdd() {
                this.$store.dispatch('addWhenOdd', this.count);
            },
            addWaitAMonent() {
                setTimeout(() => {
                    this.$store.dispatch('add', this.count);
                }, 1000);
            }
        },
        computed: {
            // 自己写的
            // sum() {
            //     return this.$store.state.sum;
            // }
            ...mapState(['sum','school','subject']), // 从store中获取数据, 通过计算属性的方式 ...意思是展开, 也就是把mapState中的所有属性展开到当前对象中, 如果不同名可以使用: mapState({'sum1':'sum','school1':'school','subject1':'subject'}])
            ...mapGetters(['bigSum']) // 从store中获取数据, 通过计算属性的方式 ...意思是展开, 也就是把mapState中的所有属性展开到当前对象中
        }
    };
</script>
<style scoped>
    button {
        margin-left: 10px;
    }
</style>